<template>
  <div id="content">
      <div id="map" ref="map"></div>
      <h1 id="msg"></h1>
  </div>
</template>

<script>
import "ol/css";
import { Map, View,Feature } from "ol";
import { Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer } from "ol/layer";
import { Polygon,LineString,Point } from "ol/geom";
import { Style,Circle,Stroke,Fill } from "ol/style";
import { Select,DragBox } from "ol/interaction";
import { never,always } from "ol/events/condition";

export default {
  name: "AppRectangleSelect2",
  data() {
      return {
      };
  },
  methods: {
    
  },
  mounted() {
     // 创建要素图层
     var vectorLayer = new VectorLayer({
            source: new VectorSource({
                features: [
                    new  Feature({
                        geometry: new    Polygon([[
                            [119.0, 29.0],
                            [119.2, 29.0],
                            [119.2, 29.2],
                            [119.0, 29.2],
                            [119.0, 29.0]
                        ]]),
                        name: 'A'
                    }),
                    new  Feature({
                        geometry: new    Polygon([[
                            [119.4, 29.0],
                            [119.6, 29.0],
                            [119.5, 29.2],
                            [119.4, 29.0]
                        ]]),
                        name: 'B'
                    }),
                    new  Feature({
                        geometry: new    LineString([
                            [119.0, 29.4],
                            [119.2, 29.3],
                            [119.4, 29.5],
                            [119.6, 29.3],
                            [119.8, 29.6]
                        ]),
                        name: 'C'
                    }),
                    new  Feature({
                        geometry: new    Point([119.4, 29.6]),
                        name: 'D'
                    }),
                ]
            }),
            style: new     Style({
                image: new     Circle({
                    radius: 30,
                    stroke: new     Stroke({
                        width: 4,
                        color: 'blue'
                    }),
                    fill: new     Fill({
                        color: 'yellow'
                    })
                }),
                stroke: new     Stroke({
                    width: 4,
                    color: 'blue'
                }),
                fill: new     Fill({
                    color: 'yellow'
                })
            })
        });

        // 创建地图
        var map = new  Map({
            target: 'map',
            layers: [
                vectorLayer,
            ],
            view: new  View({
                projection: 'EPSG:4326',
                center: [119.2, 29.2],
                zoom: 10
            })
        });

        // 创建选择工具，用于盛放矩形框内的要素
        var select = new      Select({
            condition:    never,
            style: new     Style({
                image: new     Circle({
                    radius: 30,
                    stroke: new     Stroke({
                        width: 4,
                        color: 'red'
                    }),
                    fill: new     Fill({
                        color: 'green'
                    })
                }),
                stroke: new     Stroke({
                    width: 4,
                    color: 'red'
                }),
                fill: new     Fill({
                    color: 'green'
                })
            })
        });

        // 创建绘制工具
        var dragBox = new DragBox({
            condition: always
        });

        // 开始绘制，清除已有要素
        dragBox.on('boxstart', function () {
            select.getFeatures().clear();
        });

        // 结束绘制
        dragBox.on('boxend', function () {
            // 获取被选择的要素
            var extent = dragBox.getGeometry().getExtent();
            vectorLayer.getSource().forEachFeatureIntersectingExtent(extent, function (feature) {
                select.getFeatures().push(feature);
            });

            // 遍历被选中的要素
            var selected = [];
            var selectedFeatures = select.getFeatures();
            for (var i = 0; i < selectedFeatures.getLength(); i++) {
                var feature = selectedFeatures.item(i);
                var name = feature.get('name');
                selected.push(name);
            }

            // 输出查询结果
            var msg = selected.join('、');
            document.getElementById('msg').innerText = '被选中的要素：' + msg;
        });

        // 添加交互工具
        map.addInteraction(dragBox);
        map.addInteraction(select);
  }
};
</script>
<style lang="scss" scoped>
#map {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
/*移除OSM的链接*/
:deep(.ol-attribution){ 
    display: none;
}
</style>